/*CSS Document*/

.container {
    position : relative;
    z-index : 1;
    margin : auto;
    height : 400px;
    width : 400px;
    background : white;
    border-style : solid;
    border-width : 1px;
    border-color : black;
}

.board {
    position : relative;
    z-index : 2;
    margin : auto;
    margin-top : 10px;
    border-style : solid;
    border-width : 1px;
    border-color : black;
    border-collapse : collapse;
}

.rank {
    margin : 0;
    border-width : 0;
    padding : 0;
}

.square {
    position : relative;
    height : 45px;
    width : 45px;
    margin : 0;
    float : left;
}

.square.selected {
    background-image : url('../img/sls.png');
    cursor : pointer;
}

.square.selected:hover {
    background-image : url('../img/hls.png');
}

.piece {
    position : absolute;
    height : 45px;
    width : 45px;
}

.piece.active {
    cursor : pointer;
}

.piece.active:hover {
    background-image : url('../img/hl.png');
}


.piece.selected {
    background-image : url('../img/sl.png');
    cursor : pointer;
}

.axisLabel { /* The axis labels for each file and each rank.*/
    position : relative;
    padding : 0;
    margin : 0;
    text-align : center;
}

.rankLabel { /* For axis labels that deal with the ranks. */
    top : -30px;
    left : -20px;
    width : 20px;
    height : 45px;
}

.fileLabel {
    width : 45px;
    height : 20px;
    float : left;
}

.fileLabelHolder {
    position : relative;
    height : 20px;
    margin : 0;
    width : 100%;
    padding : 0;
}